<template>
  <div>
    <div class="TimerHead">
      <p>HUD计时器</p>
      <p>（可使用计时背景）</p>
    </div>
    <div class="Timerimg">
      <div>
        <ul>
          <li></li>
          <p>默认定时器</p>
        </ul>
        <ul>
          <li style="line-height: 200px">VIP</li>
          <p>酷黑表盘</p>
        </ul>
      </div>
      <div>
        <ul>
          <li></li>
          <p>水钟定时器</p>
        </ul>
      </div>
    </div>
    <div class="TimerHead">
      <p>主题计时器</p>
      <p>（可使用计时背景）</p>
    </div>
    <div class="TimerFooter">
      <ul>
        <li></li>
        <p>翻页时钟</p>
      </ul>
      <ul>
        <li></li>
        <p>数字时钟</p>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.TimerHead {
  display: flex;
  margin-top: 46px;
  margin-left: 118px;
  font-size: 28px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.TimerHead p:nth-child(1) {
  color: rgba(16, 16, 16, 100);
  margin-right: 18px;
}
.TimerHead p:nth-child(2) {
  color: rgba(190, 190, 190, 100);
}
.Timerimg {
  display: flex;
  justify-content: space-around;
}
.Timerimg div {
  text-align: center;
}
.Timerimg ul li {
  width: 200px;
  height: 200px;
  line-height: 40px;
  background-color: rgba(239, 239, 239, 100);
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
  border-radius: 50%;
  margin-bottom: 34px;
  margin-top: 66px;
}
.TimerFooter {
  display: flex;
  justify-content: space-around;
}
.TimerFooter ul {
  text-align: center;
  margin-top: 102px;
}
.TimerFooter ul li {
  width: 270px;
  height: 270px;
  line-height: 40px;
  background-color: rgba(239, 239, 239, 100);
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
  margin-bottom: 19px;
}
</style>